<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>11.for循环自动生成V字形 - 提高版</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				border: 0;
				list-style: none;
			}
			
			.clearfix:before,
			.clearfix:after {
				display: table;
				content: '';
			}
			
			.clearfix:after {
				clear: both;
			}
			
			.clearfix {
				*zoom: 1;
			}
			
			input {
				display: block;
				width: 220px;
				height: 40px;
				font-weight: normal;
				font-size: 18px;
				line-height: 40px;
				font-family: "Microsoft YaHei";
				color: #fff;
				background-color: #000;
				outline: none;
				text-align: center;
				margin: 50px auto 0;
			}
			
			.wrap {
				width: 500px;
				margin: 50px auto 0;
				position: relative;
			}	
			
			.wrap div {
				position: absolute;
				left: 0;
				top: 0;
				width: 48px;
				height: 48px;
				border: 1px solid #000;
				font-weight: bold;
				font-size: 18px;
				line-height: 50px;
				font-family: "SimSun";
				color: #999;
				text-align: center;
			}
		</style>
		<script>
			window.onload = function () {
				// 获取外框元素
				var oWrap = document.querySelectorAll(".wrap")[0];
				// 获取按钮元素
				var oBtn = document.querySelectorAll("input")[0];
				// 用来累加的变量
				var oInner = '';
				// 定义一个颜色数组
				var aColors = ["blue", "orange", "pink", "#ccc"];
				// 要生成多少个div
				var len = 9;
				// 定义一个flag变量
				var flag = 0;
				// left值
				var left = 0;
				// top值
				var top = 0;
				
				// 为按钮添加点击事件
				oBtn.addEventListener ("click", function () {
					if ( flag == 0 ) {
						// 每次点击之前先清空下，避免累加造成卡顿
						oInner = '';
						for ( var i = 0; i < len; i++ ) {
							left = i * 50 + 'px';
							if ( i < len / 2 ) {
								top = ((len - 1) / 2 - i) * 50 + 'px';
							} else {
								top = (i - (len - 1) / 2) * 50 + 'px';
							}
							
							oInner += '<div style="top:' + top + '; left:' + left + '; background-color: '+ aColors[i % aColors.length] +';">' + i + '</div>'};

							flag++;
						} else if ( flag == 1 ) {
							// 每次点击之前先清空下，避免累加造成卡顿
							oInner = '';
							for ( var i = 0; i < len; i++ ) {
								top = i * 50 + 'px';
								if ( i < len / 2 ) {
									left = i * 50 + 'px';
								} else {
									left = (len - i - 1) * 50 + 'px';
								}
								
								oInner += '<div style="top:' + top + '; left:' + left + '; background-color: '+ aColors[i % aColors.length] +';">' + i + '</div>';
							}	

							flag++;
						} else if ( flag == 2 ) {
							// 每次点击之前先清空下，避免累加造成卡顿
							oInner = '';
							for ( var i = 0; i < len; i++ ) {
								left = i * 50 + 'px';
								if ( i < len / 2 ) {
									top = i * 50 + 'px';
								} else {
									top = (len - i - 1) * 50 + 'px';
								}
								
								oInner += '<div style="top:' + top + '; left:' + left + '; background-color: '+ aColors[i % aColors.length] +';">' + i + '</div>';
							}
							
							flag++;
						} else {
							// 每次点击之前先清空下，避免累加造成卡顿
							oInner = '';
							for ( var i = 0; i < len; i++ ) {
								top = i * 50 + 'px';
								if ( i < len / 2 ) {
									left = ((len - 1) / 2 - i) * 50 + 'px';
								} else {
									left = (i - (len - 1) / 2) * 50 + 'px';
								}
								
								oInner += '<div style="top:' + top + '; left:' + left + '; background-color: '+ aColors[i % aColors.length] +';">' + i + '</div>'
							}
							
							flag = 0;
						}
					// 等循环结束后一次性塞到这里面去
					oWrap.innerHTML = oInner;
				}, false);
			};
		</script>
	</head>
	<body>
		<input type="button" value="自动生成V字形 - 提高版" />
		<!-- 这里要存放100个div start -->
		<div class="wrap clearfix"></div>	
		<!-- 这里要存放100个div end -->
	</body>
</html>